<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>列表渲染</title>
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>

<body>
<h1>基本用法</h1>
  <ul id="for">
    <li v-for="item in items">{{item.message}}</li>
  </ul>
  <h2>对父作用域属性的完全访问权限</h2>
  <ul id="for-2">
    <li v-for="(item,index) in items">{{parentMessage}} - {{index}} - {{item.message}}</li>
  </ul>
  <!-- 对象迭代 v-for -->
  <h3>对象迭代</h3>
  <ul id="for-3">
    <li v-for="value in object">{{value}}</li>
  </ul>
  <!-- 提供第二个的参数为键名 -->
  <h4>提供第二个的参数为键名</h4>
  <ul id="for-4">
    <li v-for="(value,key,index) in object">{{index + 1}}.{{key}}:{{value}}</li>
  </ul>
  <!-- 整数迭代 -->
  <h5>整数迭代</h5>
  <div id="for-5">
    <div v-for="item in 10">{{item}}</div >
  </div>
  <script type="text/javascript">
  var vfor = new Vue({
    el: "#for",
    data: {
      items: [

        {
          message: "list1",
        }, {
          message: "list2",

        }, {
          message: "list3"
        }, {
          message: "list4"
        }, {
          message: "list5"
        }, {
          message: "list6"
        }
      ]

    }
  });

  var vfor2 = new Vue({

    el: "#for-2",
    data: {

      parentMessage: "Parent",
      items: [{
        message: "apple"
      }, {
        message: "banana"
      }, {
        message: "orange"
      }, ]
    }
  });
  // 对象迭代 v-for 
  var vfor3 = new Vue({
    el: "#for-3",
    data: {
      object: {
        firstName: "Mary",
        lastName: "Ma",
        age: 30
      }
    }

  });
  // 提供第二个的参数为键名
  var vfor4 = new Vue({

    el: "#for-4",
    data: {
      object: {
        firstName: "黄",
        lastName: "正正",
        age: 25
      }
    }

  });
  // 整数迭代
  var vfor5 = new Vue({
    el:"#for-5",
    data:{

      obj:[
        {message:"0"},
        {message:"1"},
        {message:"2"},
        {message:"3"},

      ]
    }
  })
  </script>
</body>

</html>
